<!-- 统计卡片 -->
<template>
  <el-row :gutter="24" style="height: 380px;">
    <el-col :lg="16" :md="24" style="padding-left: 6px;padding-right: 1px;margin-top:5px; height: 380px;">
      <el-card class="analysis-chart-card" shadow="never" style="height: 380px;">
        <template v-slot:header>
          <div class="ele-cell" style="font-size: 16px;height: 18px;">
            <div class="ele-cell-content">订单销售趋势分析</div>
            <div :class="['ele-inline-block', { 'hidden-xs-only': true }]">
              <el-radio-group v-model="where.saledateEnum" size="small" @input="(v)=>initSaleTime(v,true)">
                <!-- <el-radio-button :label="day">今日</el-radio-button> -->
                  <el-radio-button :label="2">本月</el-radio-button>
                  <el-radio-button :label="3">本年</el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </template>
        <div style="display: flex;width: 100%;height: 100px;flex-direction: column;">
          <div class="analysis-chart-card-content" >
            <v-chart
              ref="saleChart"
              style="height: 300px;"
              :option="saleChartOption"
            />
            </div>
        </div>
        <div class="analysis-chart-card-content">
      </div>
      </el-card>
    </el-col>
    <el-col :lg="8" :md="24" style="padding-left: 3px;padding-right: 3px;margin-top:5px; height: 380px;">
      <el-card class="analysis-chart-card" shadow="never" style="height: 380px;">
        <template v-slot:header>
          <div class="ele-cell" style="font-size: 16px;height: 18px;">
            <div class="ele-cell-content">产品销售额排名</div>
            <div :class="['ele-inline-block', { 'hidden-xs-only': true }]">
              <el-radio-group v-model="where.saleamountdateEnum" size="small" @input="(v)=>initSaleAmountTime(v,true)">
                <!-- <el-radio-button :label="day">今日</el-radio-button> -->
                <el-radio-button :label="2">本月</el-radio-button>
                <el-radio-button :label="3">本年</el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </template>
        <div >
        <v-chart
          ref="SaleAmountChart"
          style="height: 340px;"
          :option="saleAmountChartOption"
        />
      </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
  // import { use } from 'echarts/core';
  import VChart from 'vue-echarts';
  import {QuerySaleTrendStatisticsView,QuerySaleProductRankStatisticsView } from '@/api/home'
  


  export default {
    name: 'HeaderCard',
    props:{
      whereParams:Object
    },
    components: { VChart },
    data() {
      return {
        where:{saledateEnum:'2',saleamountdateEnum:'2'},
        saleChartOption:{},
        saleAmountChartOption:{},
        // saleXData:['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
        // saleorderYData:[120, 132, 101, 134, 90, 230, 210],
        // saleamountYData:[220, 182, 191, 234, 290, 330, 310],
        saleXData:[],
        saleorderYData:[],
        saleamountYData:[],

        // salvProName:['瓦片-1', '瓦片-2', '瓦片-3', '瓦片-4', '瓦片-5', '瓦片-6', '瓦片-7', '瓦片-8'],
        // salvProValue:[239, 184, 154, 144, 135, 110,  98, 89],
        salvProName:[],
        salvProValue:[],
      };
    },
    created(){
      
    },
    activated(){
      this.initSaleTime('2',true);
      this.initSaleAmountTime('2',true);
    },
    methods: {
      reloadQuerySaleTrend(){

        var querysaleout = {dateType:'month'};
        if(this.where.saledateEnum == '1') querysaleout.dateType ='day';
        if(this.where.saledateEnum == '2') querysaleout.dateType ='month';
        if(this.where.saledateEnum == '3') querysaleout.dateType ='year';
        QuerySaleTrendStatisticsView(querysaleout).then((res)=>{
          if(res && res.length>0){
            this.saleXData = [];  
            this.saleorderYData=[];
            this.saleamountYData =[];
            res.map((item)=>{

              let currIndex = this.saleXData.findIndex((f)=>{
                return this.where.saledateEnum == '2'? f == item.dt+'日': f == item.dt+'月';
              })

              if(currIndex<0) 
              {
                if(this.where.saledateEnum == '2') this.saleXData.push(item.dt+'日'); 
                if(this.where.saledateEnum == '3') this.saleXData.push(item.dt+'月'); 
              }

              if(item.type == 1){
                this.saleorderYData.push(item.val)
              }

              if(item.type == 2){
                this.saleamountYData.push(item.val)
              }
            });
          }

          this.drawsaleChart();
        });
      },

      reloadQuerySaleProductRank(){

        var querysaleout = {dateType:'year'};
        if(this.where.saleamountdateEnum == '1') querysaleout.dateType ='day';
        if(this.where.saleamountdateEnum == '2') querysaleout.dateType ='month';
        if(this.where.saleamountdateEnum == '3') querysaleout.dateType ='year';

        QuerySaleProductRankStatisticsView(querysaleout).then((res)=>{

          if(res && res.length>0){
            this.salvProName = [];  
            this.salvProValue=[];
            res.map((item)=>{
              this.salvProName.push(item.name); 
              this.salvProValue.push(item.val); 
            });
          }
          this.drawsaleAmountChart();
        });
      },

      initSaleTime(timeId, flag) {
        this.where.saledateEnum = timeId;

        if (flag) {
          this.reloadQuerySaleTrend();
        }
      },

      initSaleAmountTime(timeId, flag) {
        this.where.saleamountdateEnum = timeId;
        if (flag) {
          this.reloadQuerySaleProductRank();
        }
      },

      drawsaleChart() {
        // 绘制图表
        this.saleChartOption = {
          color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
          legend: {
              data: ['按订单数','按销售额'],
              icon: "rect",
              itemHeight: 4,
              itemWidth: 4
          },
          grid: {
            top:40,
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
              {
                show:true,
                type: 'category',
                boundaryGap: false,
                data: this.saleXData,
                axisLabel: {
                    color: '#9eaaba',
                },
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: true
                },
                axisTick: {
                    show: false
                }
              }
          ],
          yAxis: [
              {
                type: 'value',
                axisLabel: { //坐标轴字体颜色
                            textStyle: {
                              color: '#9eaaba'
                            }
                        },
                splitLine: { //网格
                    show: true,
                    lineStyle: {
                      color: '#dadde4',
                      type: "dashed"
                    }
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false
                }
              }
          ],
          series: [
              {
                name: '按订单数',
                type: 'line',
                areaStyle: {
                    opacity: 0.5,
                    color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                          offset: 0,
                          color: 'rgb(55, 162, 255)'
                      },
                      {
                          offset: 1,
                          color: 'rgb(116, 21, 219)'
                      }
                    ])
                },
                label: {
                    show: true,
                    position: "bottom",
                },
                showSymbol: false,
                data: this.saleorderYData
              },
              {
                name: '按销售额',
                type: 'line',
                label: {
                    show: true,
                    position: 'top',
                },
                areaStyle: {
                    opacity: 0.5,
                    color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                          offset: 0,
                          color: 'rgb(128, 255, 165)'
                      },
                      {
                          offset: 1,
                          color: 'rgb(1, 191, 236)'
                      }
                    ])
                },
                showSymbol: false,
                data: this.saleamountYData
              },
          ]
        };
      },

      drawsaleAmountChart() {
        // 绘制图表
        this.saleAmountChartOption = {
          backgroundColor: '#fff',
          grid: {
              left: '2%',
              right: '2%',
              bottom: '2%',
              top: '2%',
              containLabel: true,
          },
          tooltip: {
              trigger: 'axis',
              axisPointer:{
                  type:'none'
              },
              formatter: '{b}:￥{c}',
          },
          xAxis: {
              show: false,
              type: 'value',
          },
          yAxis: [{
              type: 'category',
              inverse: true,
              axisLabel: {
                  show: false,
                  textStyle: {
                      color: '#687284',
                      fontSize:13,
                  },
              },
              splitLine: {
                  show: false,
              },
              axisTick: {
                  show: false,
              },
              axisLine: {
                  show: false,
              },
              data: this.salvProName,
          }],
          series: [
              {
                  name: 'value',
                  type: 'bar',
                  zlevel: 1,
                  showBackground: true,
                  backgroundStyle: {
                      color: '#f5f8ff'
                  },
                  itemStyle: {
                    normal: {
                        barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
                        color: this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    '#2FAEF2', '#1CD8A8'
                    ].map((color, offset) => ({
                        color,
                        offset
                    }))), // 渐变
                    },
                  },
                  label: {
                    normal: {
                      color: '#000',
                      show: true,
                      position: [0, '-12px'],
                      textStyle: {
                          fontSize: 13,
                          color: '#687284',
                      },
                      formatter: '{b}',
                    },
                  },
                  barWidth: 15,
                  data: this.salvProValue,
              },
              {
                name: '21',
                type: 'bar',
                barWidth: 15,
                barGap: '-100%',
                data: this.salvProValue,
                itemStyle: {
                  normal: {
                      color: '#f5f8ff',
                  },
                  emphasis: {
                      color: '#f5f8ff',
                  },
                },
                label: {
                  normal: {
                    color: '#000',
                    show: true,
                    position: ['80%', '-12px'],
                    textStyle: {
                        fontSize: 13,
                        color: '#687284',
                    },
                    formatter: '￥{c}',
                  },
                },
              },
          ],
        };
      },
    }
  };
</script>

<style scoped>
  .analysis-chart-card-num {
    font-size: 16px;
    font-weight: bold;
  }

  .analysis-chart-card-content {
    height: 60px;
    box-sizing: border-box;
    margin-bottom: 2px;
    margin-top: 6px;
    /* border: 1px red solid; */
    
  }

  .analysis-chart-card-text {
    padding-top: 2px;
  }
</style>
